@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    .animate-shake {
        animation: shake 0.5s;
    }
    .animate-damage {
        animation: damage 1s forwards;
    }
    .animate-heal {
        animation: heal 1s forwards;
    }
    .animate-flash {
        animation: flash 0.3s;
    }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@keyframes damage {
    0% { color: #EF4444; transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; }
    100% { transform: translateY(-20px); opacity: 0; }
}

@keyframes heal {
    0% { color: #10B981; transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; }
    100% { transform: translateY(-20px); opacity: 0; }
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
